<template>
    <div class="contentWeb clear">
        <div class="member_menu">
            <Personleft active="work"/>
        </div>
        <div class="member_right ">
            <div class="personTengt">
                <Memtitle name="添加工作经验"/>
                <el-form ref="form" :model="form" :rules="rules" label-width="180px" style="margin-top: 20px;">
                    <el-form-item required label="时间">
                        <el-date-picker
                                v-model="tmevalue"
                                value-format="yyyy-MM-dd"
                                type="daterange"
                                range-separator="至"
                                @change="timeChange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <div class="clear">
                        <div class="formban">

                            <el-form-item label="公司名称" prop="companyName">
                                <el-input placeholder="请输入" v-model="form.companyName"/>
                            </el-form-item>
                            <el-form-item required label="所属行业">
                                <el-cascader style="width: 60%" :v-loading="hangyeLoading" :options="hangyelist"
                                             placeholder="请选择行业" v-model="form.industry" clearable
                                             :show-all-levels="false"
                                             :props="{value: 'name', label: 'name', children: 'contentSet'}"></el-cascader>
                            </el-form-item>
                            <el-form-item label="所属部门" prop="department">
                                <el-input placeholder="请输入" v-model="form.department"/>
                            </el-form-item>
                        </div>
                        <div class="formban">
                            <el-form-item required label="公司规模">
                                <el-select v-model="form.companySize" :loading="guimoloading" placeholder="请选择公司规模">
                                    <el-option :label="item.subTypeName" :key="index" :value="item.subTypeName"
                                               v-for="(item, index) in guimoList"></el-option>

                                </el-select>
                            </el-form-item>
                            <el-form-item label="职位" prop="position">
                                <el-input placeholder="请输入" v-model="form.position"/>
                            </el-form-item>
                            <el-form-item required label="公司性质">
                                <el-select v-model="form.nature" :loading="xingzhiloading" placeholder="请选择公司性质">
                                    <el-option :label="item.subTypeName" :key="index" :value="item.subTypeName"
                                               v-for="(item, index) in xingzhiList"></el-option>

                                </el-select>
                            </el-form-item>

                        </div>
                    </div>
                    <el-form-item label="工作描述" prop="workDescribe">
                        <el-input type="textarea" rows="5" v-model="form.workDescribe" style="width: 60%"
                                  placeholder="请输入"/>
                    </el-form-item>
                    <el-form-item required label="工作类型">
                        <div class="radiotab">
                            <div :class="form.workType == 1 ? 'radios on': 'radios'" @click="typechange('workType',1)">
                                全职
                            </div>
                            <div :class="form.workType == 2 ? 'radios on': 'radios'" @click="typechange('workType',2)">
                                兼职
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item style="margin-top: 40px">
                        <el-button style="background: #20a2b2; width: 300px; border: 0; margin-left: 150px;"
                                   type="primary" @click="onSubmit">保存
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script type="text/babel">
// @ is an alias to /src

import Memtitle from '../../components/memtitle'
import Personleft from '../../components/personleft'
import {
  CVExperienceById,
  OccupationType,
  workAdd,
  updateExperience,
  EnterpriseNature,
  EnterpriseSize
} from '../../assets/js/domains'

export default {
  name: 'PersonWorkAdd',
  components: {
    Personleft,
    Memtitle
  },
  directives: {},
  data: function () {
    return {
      tmevalue: '',
      hangyeLoading: true,
      xingzhiloading: true,
      guimoloading: true,
      hangyelist: [],
      xingzhiList: [],
      guimoList: [],
      form: {
        workType: 1
      },
      rules:{
        companyName:[
          { required: true, message: '请输入公司名称', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        department:[
          { required: true, message: '请输入所属部门', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        position:[
          { required: true, message: '请输入职位', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ],
        workDescribe:[
          { required: true, message: '请输入工作描述', trigger: 'blur' },
          { validator: this.validSensWords, trigger: 'blur' }
        ]
      }
    }
  },
  created: function () {
    document.documentElement.scrollTop = document.body.scrollTop = 0
    this.form.userUid = localStorage.getItem('md_user_uid')
  },
  computed: {},
  mounted: function () {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.getpost()
    }
    this.getOccupationType()
    this.getEnterpriseNature()
    this.getEnterpriseSize()
  },
  methods: {
    timeChange: function () {
      this.form.startTime = this.tmevalue[0]
      this.form.endTime = this.tmevalue[1]
    },
    getOccupationType: function () {
      const _this = this
      OccupationType().then(function (res) {
        _this.hangyeLoading = false
        if (res.code === 200) {
          _this.hangyelist = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    getEnterpriseNature: function () {
      const _this = this
      EnterpriseNature().then(function (res) {
        _this.xingzhiloading = false
        if (res.code === 200) {
          _this.xingzhiList = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    getEnterpriseSize: function () {
      const _this = this
      EnterpriseSize().then(function (res) {
        _this.guimoloading = false
        if (res.code === 200) {
          _this.guimoList = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    typechange: function (name, value) {
      this.form[name] = value
    },
    getpost: function () {
      const _this = this
      CVExperienceById({
        id: this.form.id
      }).then(function (res) {
        if (res.code === 200) {
          _this.form = res.data
          _this.form.industry = _this.form.industry.split(',')
          _this.tmevalue = [_this.form.startTime ? _this.form.startTime : '', _this.form.endTime ? _this.form.endTime : '']
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {

            }
          })
        }
      })
    },
    onSubmit(){
      if (!this.submitCheck()) {
        return
      }
      this.$refs.form.validate(valid => {
        if(!valid) return
        this.submitData()
      })
    },
    submitData () {
      const _this = this
      const prams = Object.assign({}, this.form)
      prams.approval = '1'
      prams.industry = this.form.industry.join(',')
      if (this.form.id) {
        delete prams.createTime
        delete prams.updateTime
        updateExperience(prams).then(function (res) {
          if (res.code === 200) {
            _this.$alert('保存成功', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                _this.$router.push({ path: '/work' })
              }
            })
          } else {
            _this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',
              callback: function () {

              }
            })
          }
        })
      } else {
        workAdd(prams).then(function (res) {
          if (res.code === 200) {
            _this.$alert('添加成功', '提示', {
              confirmButtonText: '确定',
              callback: function () {
                _this.$router.push({ path: '/work' })
              }
            })
          } else {
            _this.$alert(res.msg, '提示', {
              confirmButtonText: '确定',
              callback: function () {

              }
            })
          }
        })
      }
    },
    submitCheck () {
      let flag = true
      if (!this.form.startTime || !this.form.endTime) {
        this.$alert('请选择时间', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      } else if (!this.form.companyName || !this.form.companyName.trim()) {
        this.$alert('请填写公司名称', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      } else if (!this.form.industry || this.form.industry.length <= 1) {
        this.$alert('请选择所属行业', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      } else if (!this.form.department || !this.form.department.trim()) {
        this.$alert('请填写所属部门', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      } else if (!this.form.companySize) {
        this.$alert('请选择公司规模', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      } else if (!this.form.position || !this.form.position.trim()) {
        this.$alert('请填写职位', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      } else if (!this.form.nature) {
        this.$alert('请选择公司性质', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      } else if (!this.form.workDescribe || !this.form.workDescribe.trim()) {
        this.$alert('请填写工作描述', '提示', {
          confirmButtonText: '确定',
          callback: () => {
          }
        })
        flag = false
      }

      return flag
    }
  }
}
</script>
<style lang="less" scoped>
    @import "../../assets/css/member";
</style>
